<template>
  <el-container>
    <el-header>数字商城管理系统</el-header>
    <el-container>
      <el-aside style="width:12rem;">
        <el-col style="width:100%;height:100%">
          <el-menu default-active="1"
                   class="ul">
            <el-menu-item v-for="(item,index) in data.nav"
                          :index="item.id"
                          :key="index"
                          :class='data.currentIndex==index?"current":""'
                          style="padding-left:20px"
                          @click="dj(item.path) ,change(item.id)">
              <el-icon>
                <keep-alive>
                  <component :is="item.icont">
                  </component>
                </keep-alive>
                <!-- {{item.icont}} -->
              </el-icon>
              <span>{{item.nantitle}}</span>
            </el-menu-item>
          </el-menu>
        </el-col>

      </el-aside>
      <el-container>
        <el-main class="bbq">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {
  User,
  Tickets,
  Flag,
  ShoppingCart,
  List,
} from '@element-plus/icons-vue'
const router = useRouter()

import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import {
  User,
  Tickets,
  Flag,
  ShoppingCart,
  List,
} from '@element-plus/icons-vue'

const data = reactive({
  currentIndex: 0,
  nav: [
    {
      id: 1,
      icont: User,
      nantitle: '用户管理',
      path: 'User',
    },
    {
      id: 2,
      icont: Tickets,
      nantitle: '作品管理',
      path: 'Works',
    },
    {
      id: 3,
      icont: ShoppingCart,
      nantitle: '订单管理',
      path: 'Order',
    },
    {
      id: 4,
      icont: List,
      nantitle: '信息管理',
      path: 'Logistics',
    },
    {
      id: 5,
      icont: Flag,
      nantitle: '物流管理',
      path: 'UserInfo',
    },
  ],
})
const dj = (a) => {
  router.push(a)
}
const change = (index) => {
  index--
  data.currentIndex = index
}

const router = useRouter()

const data = reactive({
  currentIndex: 0,
  nav: [
    {
      id: 1,
      icont: User,
      nantitle: '用户管理',
      path: 'User',
    },
    {
      id: 2,
      icont: Tickets,
      nantitle: '作品管理',
      path: 'Works',
    },
    {
      id: 3,
      icont: ShoppingCart,
      nantitle: '订单管理',
      path: 'Order',
    },
    {
      id: 4,
      icont: List,
      nantitle: '信息管理',
      path: 'Logistics',
    },
    {
      id: 5,
      icont: Flag,
      nantitle: '物流管理',
      path: 'UserInfo',
    },
    {
      id: 6,
      icont: Flag,
      nantitle: 'Fenye',
      path: 'Fenye',
    },
  ],
})

const dj = (a) => {
  router.push(a)
}
const change = (index) => {
  index--
  data.currentIndex = index
}
</script>
<style lang="less" scoped>
.current {
  background: rgba(255, 255, 255, 0.353);
  box-shadow: 1px 0.5rem 0.5rem rgba(0, 0, 0, 0.539);

  span {
    color: rgb(0, 0, 0);
  }

  .el-icon {
    color: rgb(0, 0, 0);
  }
}

.ul {
  width: 100%;
  height: 100%;
  color: rgb(255, 255, 255);
}

.el-container {
  height: 100%;

  .el-header {
    height: 6rem;
    border: 1px solid rgba(255, 255, 255, 0.458);
    box-shadow: 1px 2rem 5rem rgba(222, 14, 14, 0.539);
    background: rgba(0, 0, 0, 0.182);
    color: white;
    font-size: 2rem;
    line-height: 6rem;
    backdrop-filter: blur(4px);
    animation: gradientBG 8s linear infinite alternate;
  }

  @keyframes gradientBG {
    0% {
      box-shadow: 1px 2rem 4rem 5rem #ffffff9d;
    }

    100% {
      box-shadow: 1px 2rem 4rem 5rem #0000007f;
    }
  }

  .el-container {
    .el-aside {
      .el-col {
        .ul {
          height: 100%;
          background: rgba(0, 0, 0, 0.182);
          backdrop-filter: blur(4px);
          box-shadow: 1px 2rem 5rem rgba(222, 14, 14, 0.539);

          .el-menu-item {
            color: rgb(255, 255, 255);
            text-align: center;
            margin: 0 auto;
            display: block;
          }
        }
      }
    }

    .el-container {
      .el-main {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 400px;
  min-height: 400px;
}
</style>